<template>
  <div class="mailConfig">
    <Form
      labelPosition="left"
      :label-width="110"
      :model="form"
      :rules="validationRules"
      ref="form"
      :top="0.2"
    >
      <FormItem label="SMTP服务器" prop="mail_smtpURL">
        <input
          type="text"
          v-model="form.mail_smtpURL"
          placeholder="从邮件服务商获取到的smtp服务器地址"
        />
      </FormItem>
      <FormItem label="SMTP端口" prop="mail_smtpPort">
        <NumberInput
          v-model="form.mail_smtpPort"
          placeholder="从邮件服务商获取到的smtp服务器端口"
        ></NumberInput>
      </FormItem>
      <FormItem label="邮箱账户" prop="mail_emailUser">
        <input
          type="text"
          v-model="form.mail_emailUser"
          placeholder="邮箱账户"
        />
      </FormItem>
      <FormItem label="邮箱密码" prop="mail_emailPwd">
        <input
          type="password"
          v-model="form.mail_emailPwd"
          placeholder="邮箱密码"
        />
      </FormItem>
      <FormItem label="管理员邮箱" prop="mail_emailSend">
        <input
          type="text"
          v-model="form.mail_emailSend"
          placeholder="管理员接收的邮箱"
        />
      </FormItem>
      <FormItem :no-padding="true" single>
        <Button color="primary" @click="submit">提交</Button>
      </FormItem>
    </Form>
    <p class="contact">
      <span>不会设置此项请联系我：</span>
      <a
        target="_blank"
        href="http://wpa.qq.com/msgrd?v=3&uin=525847633&site=qq&menu=yes"
        ><img
          border="0"
          src="http://wpa.qq.com/pa?p=2:525847633:51"
          alt="点击咨询"
          title="点击咨询"
      /></a>
    </p>
  </div>
</template>
<script>
export default {
  name: "setMail",
  data() {
    return {
      mode: "single",
      form: {
        mail_smtpURL: "",
        mail_smtpPort: "",
        mail_emailUser: "",
        mail_emailPwd: "",
        mail_emailSend: ""
      },
      validationRules: {
        rules: {},
        required: [
          "mail_smtpURL",
          "mail_smtpPort",
          "mail_emailUser",
          "mail_emailPwd",
          "mail_emailSend"
        ],
        email: ["mail_emailUser", "mail_emailSend"],
        url: ["mail_smtpURL"]
      }
    };
  },
  methods: {
    async submit() {
      let validResult = this.$refs.form.valid();
      if (validResult.result) {
        // this.$Message("验证成功");
        let res = await this.$post("/api/mailconfig/setconfig", {
          mail_smtpURL: this.form.mail_smtpURL,
          mail_smtpPort: this.form.mail_smtpPort,
          mail_emailUser: this.form.mail_emailUser,
          mail_emailPwd: this.form.mail_emailPwd,
          mail_emailSend: this.form.mail_emailSend
        });
        if (res && res.code === 200) {
          this.$Message.success("成功");
        } else {
          this.$Message.error("失败");
        }
      }
    },
    async getconfig() {
      let res = await this.$get("/api/mailconfig/getconfig");
      if (res && res.code === 200) {
        if (!res.data) return;
        this.form.mail_smtpURL = res.data.mail_smtpURL;
        this.form.mail_smtpPort = res.data.mail_smtpPort;
        this.form.mail_emailUser = res.data.mail_emailUser;
        this.form.mail_emailPwd = res.data.mail_emailPwd;
        this.form.mail_emailSend = res.data.mail_emailSend;
      } else {
        this.$Message.error("获取失败····");
      }
    }
  },
  mounted() {
    this.getconfig();
  }
};
</script>
<style lang="less" scoped>
.mailConfig {
  padding: 20px;
  margin: 50px auto;
  width: 600px;
  .contact {
    color: #c1c1c1;
    height: 40px;
    margin-top: 20px;
    display: flex;
    justify-content: left;
  }
}
</style>